<template>
  <div id="app">
    <headers :headmsg="headMsg"></headers>
    <router-view></router-view>
    <nav class="mui-bar mui-bar-tab">
      <router-link class="mui-tab-item" to="/home">
        <span
          :class="['mui-icon','dog-icon', {'dog-icon-home':!isHome,'dog-icon-home-action':isHome}]"
        ></span>
        <span class="mui-tab-label">首页</span>
      </router-link>
      <router-link class="mui-tab-item" to="/borrow/qqzt?page=1">
        <span
          :class="['mui-icon','dog-icon',{'dog-icon-jie':!isBorrow,'dog-icon-jie-action':isBorrow}]"
        ></span>
        <span class="mui-tab-label">出借</span>
      </router-link>
      <router-link class="mui-tab-item" to="/find">
        <span
          :class="['mui-icon','dog-icon',{'dog-icon-find':!isFind,'dog-icon-find-action':isFind}]"
        ></span>
        <span class="mui-tab-label">发现</span>
      </router-link>
      <router-link class="mui-tab-item" to="/account">
        <span
          :class="['mui-icon','dog-icon',{'dog-icon-me':!isAccount,'dog-icon-me-action':isAccount}]"
        ></span>
        <span class="mui-tab-label">账户</span>
      </router-link>
    </nav>
    <!-- 遮挡层 -->
    <div class="mark" v-show="$store.state.mark" @click.stop="markHannel" ref="mark"></div>
  </div>
</template>
<script>
import headers from "./components/Headers";
export default {
  data() {
    return {
      isHome: true,
      isBorrow: false,
      isFind: false,
      isAccount: false,
      headMsg: {
        head: false,
        title: "",
        right: false,
        rightTxt: ""
      }
    };
  },
  mounted() {
    this.$refs.mark.style.height = document.documentElement.clientHeight + "px";
  },
  watch: {
    "$route.path": function(newVal, oldVal) {
      if(newVal.includes('/borrow')){
          this.isHome = false;
          this.isBorrow = true;
          this.isFind = false;
          this.isAccount = false;
          this.headMsg = {
            head: true,
            title: "出借"
          };
          return true;
      }
      switch (newVal) {
        case "/home":
          this.isHome = true;
          this.isBorrow = false;
          this.isFind = false;
          this.isAccount = false;
          this.headMsg = {
            head: false
          };
          break;
        case "/find":
          this.isHome = false;
          this.isBorrow = false;
          this.isFind = true;
          this.isAccount = false;
          this.headMsg = {
            head: true,
            title: "积分商城",
            right: true,
            rightTxt: "规则"
          };
          break;
        case "/account":
          this.isHome = false;
          this.isBorrow = false;
          this.isFind = false;
          this.isAccount = true;
          this.headMsg = {
            head: true,
            title: "登录",
            right: true,
            rightTxt: "注册"
          };
          break;
      }
      
    }
  },
  methods: {
    markHannel() {
      this.$store.commit("toggleMakr");
      document.documentElement.clientHeight;
    }
  },
  components: {
    headers
  }
};
</script>

<style lang="scss">
#app {
  padding-bottom: 0.5rem;
}
.mui-bar-tab {
  background: #ffffff;
}
.mui-bar-tab .mui-tab-item .mui-icon {
  width: 0.25rem;
  height: 0.25rem;
}
.dog-icon {
  background-image: url("../public/images/icon.png");
  background-repeat: no-repeat;
  background-size: 1.11rem 2.78rem;
}
.dog-icon-home {
  background-position: -1px 0px;
}
.dog-icon-jie {
  background-position: -0.56rem 0px;
}
.dog-icon-find {
  background-position: -1px -0.28rem;
}
.dog-icon-me {
  background-position: -0.56rem -0.28rem;
}
.dog-icon-home-action {
  background-position: -0.28rem 0px;
}
.dog-icon-jie-action {
  background-position: -0.84rem 0px;
}
.dog-icon-find-action {
  background-position: -0.28rem -0.28rem;
}
.dog-icon-me-action {
  background-position: -0.84rem -0.28rem;
}
.mark {
  width: 100%;
  position: fixed;
  background: rgba($color: #000000, $alpha: 0.5);
  top: 0px;
  left: 0px;
  z-index: 99;
}
</style>
